<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'canvas'})}`"></div>
	<onekit-view onekit-class="page-body">
		<template v-if="canIUse">
			<onekit-view onekit-class="page-section">
				<onekit-view onekit-class="page-section-spacing">
					<onekit-view onekit-class="page-body-wrapper">
						<onekit-canvas onekit-class="canvas" canvas-id="canvas"></onekit-canvas>
					</onekit-view>
				</onekit-view>
			</onekit-view>
		</template>
		<onekit-view v-else onekit-style="margin: 15px; text-align:center">微信版本过低，暂不支持本功能</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../../page/common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../../page/common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "canvas",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
import {compareVersion} from '../../../../util/util';
export default Page(ONEKIT_JSON,["canIUse"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'canvas',
        "path":'page/component/pages/canvas/canvas'
};
    },
    "data":{
        "canIUse":true
},
    "onReady"(){
      const {SDKVersion} = wx.getSystemInfoSync();
      if(compareVersion(SDKVersion,'2.7.0') < 0)
      {
        console.log('123');
        this.setData({
            "canIUse":false
});
      }
else
      {
        this.position = {
            "x":150,
            "y":150,
            "vx":2,
            "vy":2
};
        this.drawBall();
        this.interval = setInterval(this.drawBall,17);
      };
    },
    "render"(canvas,ctx){
      ctx.clearRect(0,0,305,305);
      this.drawBall2D(ctx);
      this.drawCar(ctx);
    },
    "drawBall"(){
      const p = this.position;
      p.x += p.vx;
      p.y += p.vy;
      if(p.x >= 300)
      {
        p.vx = -2;
      };
      if(p.x <= 7)
      {
        p.vx = 2;
      };
      if(p.y >= 300)
      {
        p.vy = -2;
      };
      if(p.y <= 7)
      {
        p.vy = 2;
      };
      const context = wx.createCanvasContext('canvas');
      function ball(x,y){
      context.beginPath(0);
      context.arc(x,y,5,0,Math.PI * 2);
      context.setFillStyle('#1aad19');
      context.setStrokeStyle('rgba(1,1,1,0)');
      context.fill();
      context.stroke();
    };
      ball(p.x,150);
      ball(150,p.y);
      ball(300 - p.x,150);
      ball(150,300 - p.y);
      ball(p.x,p.y);
      ball(300 - p.x,300 - p.y);
      ball(p.x,300 - p.y);
      ball(300 - p.x,p.y);
      context.draw();
    },
    "onUnload"(){
      clearInterval(this.interval);
    }
});

</script>
<style 
 lang="css">
@import '/page/common/lib/weui.css';
.canvas {
  width: 305px ;
  height: 305px ;
  background-color: var(--weui-BG-1) ;
  margin-top: 30px ;
}
</style>